<template>
  <div class="add-product-wrapper">
    <el-form label-width="108px" :model="form" ref="form" :rules="rules">

      <el-form-item label="网站logo">
        <imageUpload v-model="form.logoSrc"/>
      </el-form-item>
      <el-form-item label="网站背景图">
        <imageUpload v-model="form.bgSrc"/>
      </el-form-item>
      <el-form-item label="网站名称" prop="sysName">
        <el-input v-model.trim="form.sysName" placeholder="请输入网站名称" />
      </el-form-item>
      <el-form-item label="网站简介" prop="sysIntroduction">
        <el-input v-model.trim="form.sysIntroduction" placeholder="请输入网站简介" />
      </el-form-item>
      <el-form-item label="网站动图">
        <imageUpload v-model="form.sysGif" :fileType='["png", "jpg", "jpeg","mp4","gif"]' :fileSize="50"/>
      </el-form-item>
      <el-form-item label="选项图标">
        <imageUpload v-model="form.optionsIcon" :fileType='["png", "jpg", "jpeg","mp4","gif"]' :fileSize="50"/>
      </el-form-item>
      <el-form-item label="底部文字">
        <el-input v-model.trim="form.bottomText" placeholder="请输入底部文字" />
      </el-form-item>
      <el-form-item label="qq链接" prop="qqSrc">
        <el-input v-model.trim="form.qqSrc" placeholder="请输入qq链接" />
      </el-form-item>
      <el-form-item label="telegram链接" prop="telegramSrc">
        <el-input v-model.trim="form.telegramSrc" placeholder="请输入telegram链接" />
      </el-form-item>
      <el-form-item label="line链接" prop="lineSrc">
        <el-input v-model.trim="form.lineSrc" placeholder="请输入line链接" />
      </el-form-item>
      <el-form-item label="whatsapp链接" prop="whatsappSrc">
        <el-input v-model.trim="form.whatsappSrc" placeholder="请输入whatsapp链接" />
      </el-form-item>
      <el-form-item label="弹窗标题" prop="alertTitle">
        <el-input v-model.trim="form.alertTitle" placeholder="请输入弹窗标题" />
      </el-form-item>
      <el-form-item label="弹窗内容" prop="alertDesc">
        <el-input v-model.trim="form.alertDesc" placeholder="请输入弹窗内容" />
      </el-form-item>

      <el-form-item label="seo标题" prop="seoTitle">
        <el-input v-model.trim="form.seoTitle" placeholder="请输入弹窗标题" />
      </el-form-item>
      <el-form-item label="seo关键词" prop="seoKeys">
        <el-input v-model.trim="form.seoKeys" placeholder="请输入弹窗内容" />
      </el-form-item>
      <el-form-item label="seo描述" prop="seoDesc">
        <el-input v-model.trim="form.seoDesc" placeholder="请输入弹窗内容" />
      </el-form-item>

      <div class="tc">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { addPmsProduct, getPmsProduct, updatePmsProduct } from '@/api/pms/product'
import ProductCategorySelect from '@/views/components/ProductCategorySelect'
import BrandSelect from '@/views/components/BrandSelect'
import { addPmsContent, getPmsContent, updatePmsContent } from '@/api/mall/pmsContent'
import { addPmsSystem, getPmsSystem, updatePmsSystem } from '@/api/mall/pmsSystem'

export default {
  name: 'AddProduct',
  dicts: ['pms_publish_status','is_other','cups'],
  components: { BrandSelect, ProductCategorySelect },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ]
      },
      form: {
        publishStatus: 0,
        sort: 1000
      },
      skuAttr: [],
      albumPics: null,
      productAttr: [
        {
          name: '颜色',
          options: [
            { name: '红' },
            { name: null }
          ]
        }
      ],
      maxOptionNum: 44
    }
  },
  created() {
    const { id } = this.$route.query
    if (id) {
      this.getInfo(id)
    }
  },
  methods: {
    refreshSku() {
      let skus = []
      let skuMap = new Map()
      this.skuAttr = [...this.productAttr]
      if (this.form.skuList) {
        this.form.skuList.forEach(sku => {
          skuMap.set(sku.spData, sku)
        })
      }
      this.productAttr.forEach((attr, index) => {
        const attrSku = []
        attr.options.forEach((option) => {
          if (!option.name) {
            return
          }
          if (index === 0) {
            attrSku.push({ [attr.name]: option.name })
          } else {
            skus.forEach(it3 => {
              attrSku.push({ ...it3, [attr.name]: option.name })
            })
          }
        })
        skus = attrSku
      })
      skus.forEach(it => {
        if (it) {
          it.spData = JSON.stringify(it)
        }
      })
      skus.forEach(it => {
        let sku = skuMap.get(it.spData)
        if (sku) {
          it.outSkuId = sku.outSkuId
          it.price = sku.price
          it.pic = sku.pic
          it.stock = sku.stock
          it.id = sku.id
        } else {
          it.outSkuId = null
          it.price = null
          it.pic = null
          it.stock = null
          it.id = null
        }

      })
      this.form.productAttr = JSON.stringify(this.productAttr)
      this.form.skuList = skus
    },
    categoryChange(value) {
      if (Array.isArray(value)) {
        console.log(value.toString())
        this.form.productCategoryName = value.toString()
      } else {
        this.form.productCategoryName = null
      }

    },
    onBrandChange(value) {
      this.form.brandName = value
    },
    getInfo(id) {
      getPmsSystem(id).then(response => {
        // const { albumPics } = response
        // if (albumPics) {
        //   this.albumPics = albumPics.split(',')
        // }
        this.form = response
        // if (this.form.productAttr) {
        //   this.productAttr = JSON.parse(this.form.productAttr)
        // }
        // this.refreshSku()
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        // if (valid) {


        if (this.form.id != null) {
          updatePmsSystem(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        } else {
          addPmsSystem(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
          });
        }
          this.cancel()
        // } else {
        //   if (this.form.name) {
        //     this.$alert('请填写规格价格', '提示', {
        //       confirmButtonText: '确定'
        //     })
        //   } else {
        //     this.$alert('请填写商品名称', '提示', {
        //       confirmButtonText: '确定'
        //     })
        //   }
        // }
      })
    },
    cancel() {
      this.$tab.closeOpenPage({ path: '/system/pmsSystem' })
    },
    changeName(s, idx, val) {
      s.options[idx].name = val
      if (s.options.length - 1 !== idx || s.options.length >= this.maxOptionNum) {
        return
      }
      s.options.push({ name: null })
    },
    addSkuSort() {
      this.productAttr.push({
        name: null,
        options: [{ name: null }]
      })
    },
    deleteSkuSort(idx) {
      this.productAttr.splice(idx)
    },
    deleteOption(s, idx) {
      s.options.splice(idx, 1)
    }
  }
}
</script>

<!--<style lang="c">-->
<!--.add-product-wrapper-->
<!--padding 12px-->
<!--          .content-->
<!--          margin 0 auto-->
<!--                   width 75%-->
<!--min-width 800px-->
<!--             .sku-wrapper-->
<!--             background-color #f7f8fa-->
<!--             padding 12px-->
<!--                       .sku_sorts-->
<!--                       .sku_sort-->
<!--                       background-color white-->
<!--                       margin-bottom 12px-->
<!--                                       .label-->
<!--                                       padding 8px-->
<!--                                                .values-->
<!--                                                padding 8px 0 0 8px-->
<!--                                                                 border-top 1px solid $border-color-->
<!--                                                                             display flex-->
<!--                                                                             flex-wrap wrap-->
<!--                                                                             .value-->
<!--                                                                             padding 0 32px 8px 0-->
<!--width 200px!important-->
<!--display flex-->
<!--align-items center-->
<!--.img-upload-mini .el-upload&#45;&#45;picture-card-->
<!--width: 48px;-->
<!--height: 48px;-->
<!--line-height: 57px;-->
<!--</style>-->

